<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td div span{
				color: red;
			}
		</style>
		<script type="text/javascript">
		
		//定义一个验证通过的全局变量
		var isPASS=false;
		
		function checkName(){
			var txtNamee = document.getElementById("txtName").value;
			var showName=document.getElementById("showName");//信息提示框
			
			if(txtNamee==null||txtNamee==""){
				//验证不通过
				showName.innerHTML="请输入姓名！";
//				document.getElementById("txtNamee").focus();//？？
				return false;
			}else{
				//验证通过，清空提示内容
				showName.innerHTML="";
				return true;
			}
		}
		
		function checkPSW(){
			var pss = document.getElementById("ps").value;
			var showPSW=document.getElementById("showPSW");
			if(pss==null||pss==""){
				showPSW.innerHTML="请输入密码！";
				return false;
			}else{
				showPSW.innerHTML="";
				return true;
			}
		}
		
		function checkSex(){
			var radSexx=document.getElementsByName("radSex");
			var isSex=false;
			//遍历所有的单选组件，看是否进行了选择
			for(var i=0;i<radSexx.length;i++){
				//判定是否进行了选择
				if(radSexx[i].checked){
					//选择了
					isSex=true;
					//结束循环
					break;
				}
			}
			
			var showSex=document.getElementById("showSex");
			//设置性别验证结果
			if(!isSex){
				showSex.innerHTML="请选择性别！";
				return false;
			}else{
				showSex.innerHTML="";
				return true;
			}
		}
		
		function checkHobby(){
			var chHobby=document.getElementsByName("ch");
			var isHobby=false;
			//遍历所有的单选组件，看是否进行了选择
			for(var i=0;i<chHobby.length;i++){
				//判定是否进行了选择
				if(chHobby[i].checked){
					//选择了
					isHobby=true;
					//结束循环
					break;
				}
			}
			
			var showHobby=document.getElementById("showHobby");
			//设置性别验证结果
			if(!isHobby){
				showHobby.innerHTML="请选择兴趣！";
				return false;
			}else{
				showHobby.innerHTML="";
                return true;
            }
        }
		
		function checkDegree(){
			var chDegree=document.getElementById("degree").value;
			var showDegree=document.getElementById("showDegree");
			if(chDegree==null||chDegree==""){
				showDegree.innerHTML="请选择学历！";
				return false;
			}else{
				showDegree.innerHTML="";
				return true;
			}
		}
		
		function checkIntroduce(){
			var chIntro=document.getElementById("ti").value;
			var showIntro=document.getElementById("showIntro");
			if(chIntro==null||chIntro==""){
				showIntro.innerHTML="自我介绍不能为空！";
				return false;
			}else{
				showIntro.innerHTML="";
				return true;
			}
		}
		
		function checkEmail(){
			var chEmail=document.getElementById("emaill").value;
			var showEmail=document.getElementById("showEmail");
			var formEmail=/^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
			
			if(chEmail==null||chEmail==""){
				showEmail.innerHTML="邮箱不能为空！";
				return false;
			}else{
				if(formEmail.test(chEmail)==false){
					showEmail.innerHTML="邮箱格式不正确！";
					return false;
				}else{
				    showEmail.innerHTML="";
				    return true;
				}
			}
		}
		
		function checkThrough(){
			var chThrough=document.getElementById("fileResume").value;
			var showThrough=document.getElementById("showThrough");
			console.info('输出对象为：');
			console.log("输出");
			console.info(chThrough);
			
			if(chThrough==null||chThrough==""){
				showThrough.innerHTML="上传附件不能为空！"
				return false;
			}else{
				showThrough.innerHTML="";
				return true;
			}
		}
		
//		 console.group("第一组信息");
//　　　　         console.log("第一组第一条:我的XX(http://www.jb51.net)");
//　　　　     console.log("第一组第二条:xxx(http://jb51.net)");
//　　       console.groupEnd();

		function checkMM(){
			
			var isNAME=checkName();
			var isPSW=checkPSW();
			var isSEX=checkSex();
			var isHOBBY=checkHobby();
			var isDEGREE=checkDegree();
			var isINTRO=checkIntroduce();
			var isEMAIL=checkEmail();
			
			var isTHROUGH=checkThrough();
			console.info(isTHROUGH);
			
			if(isNAME&&isPSW&&isSEX&&isHOBBY&&isDEGREE&&isINTRO&&isEMAIL&&isTHROUGH){
				//验证通过
				return true;
			}else{
				return false;
			}
		}
		
		function checkMM2(){
			var isTHROUGH=checkThrough();
			console.info(isTHROUGH);
		}


function doSubmit() {

}</script>
	</head>

	<body>
		<form action="#" method="get">
			<table cellspacing="0" width="600" bordercolor="FBCCBB" align="center">
				<tbody>
					<tr height="80">
						<td>姓名</td>
						<!--<td><input disabled="disabled" type="text" id="txtName" name="txtName" maxlength="4" style="width: 60%;border-color:blue;"/></td>-->
						<td><input type="text" id="txtName" name="txtName" maxlength="4" style="width: 60%;border-color:blue;" onblur="checkName();"/>
						<div><span id="showName"></span></div></td>
					</tr>
					<tr height="80">
						<td>登录密码</td>
						<!--<td><input readonly="readonly" type="password" id="ps" name="pp" style="width: 60%;border-color:deeppink;"/></td>-->
						<td><input type="password" id="ps" name="pp" style="width: 60%;border-color:deeppink;" onblur="checkPSW();" />
						<div><span id="showPSW"></span></div></td>
					</tr>
					<tr height="80">
						<td>性别</td>
						<!--radio类型的输入框，需要name属性值一致，才具有互斥性-->
						<td><input type="radio" id="radSex1" name="radSex" onclick="checkSex();"/>女
							<input type="radio" id="radSex2" name="radSex" onclick="checkSex();"/>男
							<input type="radio" id="radSex3" name="radSex" onclick="checkSex();"/>人妖
							<div><span id="showSex"></span></div>
						</td>
					</tr>
					<tr height="80">
						<td>个人简历</td>
						<!--仅在文件上传中可使用accept属性，规定能够通过文件上传进行提交的文件类型-->
						<td><input accept="image/jpeg" type="file" id="fileResume" name="fileResume" onclick=""/>
						<div><span id="showThrough"></span></div></td>
					</tr>
					<tr height="80">
						<td>兴趣爱好</td>
						<td><input type="checkbox" id="ch1" name="ch" onclick="checkHobby()"/>摄影
							<input type="checkbox" id="ch2" name="ch" onclick="checkHobby()"/>旅游
							<input type="checkbox" id="ch3" name="ch" onclick="checkHobby()"/>读书
							<input type="checkbox" id="ch4" name="ch" onclick="checkHobby()"/>跑步
							<input type="checkbox" id="ch5" name="ch" onclick="checkHobby()"/>打球
							<div><span id="showHobby"></span></div>
						</td>
					</tr>
					<tr height="80">
						<td>学历</td>
						<td><select id="degree" name="de" style="width: 30%;" onclick="checkDegree();">//onchage,onblur均可
        					<option value=""></option>
        					<option value="cz" >初中</option>
        					<option value="gz" >高中</option>
        					<option value="dz" >专科</option>
        					<!--<option value="bk" selected>本科</option>-->
        					<option value="ss" >硕士</option>
        				</select>
						<div><span id="showDegree"></span></div></td>
					</tr>
					<tr height="80">
						<td>邮箱</td>
						<td><input type="email" id="emaill" name="email" onclick="checkEmail();"/>
						<div><span id="showEmail"></span></div></td>
					</tr>
					<tr height="80">
						<td>自我介绍</td>
						<td><textarea id="ti" name="tt" style="width: 60%;border-color: lightgreen;" onclick="checkIntroduce();"></textarea>
							<div><span id="showIntro"></span></div>
						</td>
					</tr>
					<tr height="80">
						<td>隐藏控件</td>
						<td><input type="hidden" id="hi" name="hh" value="秃鹰秃鹰，我是毒蛇" /></td>
					</tr>
					<tr>
						<td colspan="2"><input type="button" id="bu" name="bu" value="注册" /></td>
					</tr>
					<tr>
						<td><input type="submit" id="sub" value="提交" style="background-color:#199B08" /></td>
						<!--<td> <input type="submit" value="提交啦" id="bbSubmit" onclick="return checkMe();" /></td>-->
						<td> <input type="submit" value="提交03" id="bbSubmit" onclick="return checkMM();" />
						     <input type="submit" value="提交04" id="bbSubmit" onclick="return checkMM2();"/>
						</td>
						<td align="center"><input type="reset" id="re" value="重置" style="background-color:#199B08" /></td>
						
					</tr>
				</tbody>
			</table>
		</form>
	</body>

</html>